<template>
<view>

<!-- 	<view class="wanlpage-classify" :style="[pageData.style]" v-if="!is_libao && !is_yimei">
		<view class="bg" :style="{backgroundImage: `url(${$wanlshop.oss(pageData.params.classifyBackground, 0, 50, 1, 'transparent', 'png')})`}">
			<view class="cu-list grid bg-transparent" :class="pageData.params.colStyle">
				<view class="cu-item" v-for="(item,index) in data" :key="index">
					<view class="name">
						<text class="text-lg" :class="item.color">{{item.name}}</text>
						<view v-if="item.tags" class="cu-tag round sm wanl-bg-orange">
							<text class="wlIcon-dot"></text> {{item.tags}}
						</view>
					</view>
					<view v-if="item.describe" class="text-sm wanl-gray">{{item.describe}}</view>
					<view class="goods margin-top-bj">
						<block v-for="(goods, keys) in item.list" :key="keys">
							<image class="radius" :src="$wanlshop.oss(goods.image, 70, 65)" @tap="onGoods(goods.id)" mode="aspectFill"/>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view> -->
	
<!-- 	@click="handleShop(item.shop_id, item.id, item.name)" 
 -->		
 
	<view 
	v-for="(item,index) in ymData"
	:key="index"
	@click="$wanlshop.to('/pages/new/yimei')" 
	class="yimei-box">
		<image :src="ym_homeimage" class="ad-image"></image>
		
		<!-- <view class="ad-box">
			<view class="ad-title">医美专区</view>
			<view class="ad-btn">
				<text class="ad-btn-title">立即进入</text>
				<view class="wlIcon-fanhui2 colorwhite"></view>
			</view>
		</view> -->
	</view>
	
	
	<view class="hot-box">
		<image src="/static/images/index/hot_bg.png" class="hot-image"></image>
		<view class="hot-content-box">
			<view class="hot-title-main">升级专区</view>
			
			<view class="hot-body">
				<view class="hot-item" 
				 v-for="(item,index) in lbzqData.goods"
				 :key="index"
				 @click="onGoods(item.id)"
				 >
					<image :src="item.image" class="hot-shop-image"></image>
					<view class="hot-title">{{item.title || ''}}</view>
					<view class="hot-price">{{item.price || '0'}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="hot-btn-boxs">
			<!-- <view class="hot-btn" @click="handleShop(lbzqData.shop_id, lbzqData.id, '礼包专区')" > -->
			<view class="hot-btn" @click="$wanlshop.to('/pages/new/category')" >
				<view class="hot-more-product">查看更多商品</view>
				<image src="/static/images/right.png" class="right-iamge"></image>
			</view>
		</view>
	 </view>
	
</view>
		
</template>
<script>
	export default {
		name: "WanlPageClassify",
		props: {
			pageData: {
				type: Object,
				default () {
					return {
						name: '分类橱窗',
						type: 'classify',
						params: [],
						style: [],
						data: []
					}
				}
			}
		},
		data() {
			return {
				data: [],
				is_libao: false,
				is_yimei: false,
				ymData:[],
				lbzqData:[],
				ym_homeimage:'',
				qt_homeimage:[],
			};
		},
		created() {
			this.loadData();
		},
		methods: {
			handleProduct(category_id, category_name) {
				this.$wanlshop.to(
					`/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`
				);
			},
			handleShop(shopId, category_id, category_name) {
				this.$wanlshop.to(
					`/pages/shop/product/list?shop_id=${shopId}&category_id=${category_id}&category_name=${category_name}`
				);
			},
			async loadData() {
				// await uni.request({
				// 	url: '/wanlshop/page/category',
				// 	data: {
				// 		col: this.pageData.params.colStyle,
				// 		data: JSON.stringify(this.pageData.data)
				// 	},
				// 	success: res => {
				// 		this.data = res.data;
						
				// 		if(this.data.length > 0){
				// 			if(this.data[0].tags == '礼包专区' || 
				// 			this.data[0].name == '礼包专区' || 
				// 			this.data[0].describe == '礼包专区'){
				// 				this.is_libao = true;
				// 			}
							
							
				// 			if(this.data[0].tags == '医美专区' ||
				// 			this.data[0].name == '医美专区' || 
				// 			this.data[0].describe == '医美专区'){
				// 				this.is_yimei = true;
				// 			}
				// 		}
				// 		console.log("data", this.data, this.is_libao, this.is_yimei);
				// 	}
				// });
				
				await uni.request({
					url: '/index/index',
					data: {
					},
					success: res => {
						this.ymData = res.data.ym;
						this.lbzqData = res.data.lbzq;
						this.ym_homeimage = res.data.ym_homeimage;
						this.qt_homeimage = res.data.qt_homeimage;
					}
				});
				
			}
		}
	}
</script>


<style scoped lang="scss">
	.wanlpage-classify {overflow: hidden;}
	.wanlpage-classify .bg{background-repeat: no-repeat; background-size: 100% auto;}
	.wanlpage-classify .cu-list { text-align: left;}
	.wanlpage-classify .cu-list>.cu-item { padding: 25rpx; overflow: hidden; }
	.wanlpage-classify .cu-list>.cu-item .cu-tag { left: 0; top: -4rpx; margin-left: 10rpx; }
	.wanlpage-classify .cu-list>.cu-item .cu-tag text {font-size: 20rpx;color: rgba(255, 255, 255, 0.5);}
	.wanlpage-classify .cu-list>.cu-item .cu-tag.sm { padding-left: 0; }
	.wanlpage-classify .cu-list>.cu-item .name .text-lg { font-size: 31rpx; }
	.wanlpage-classify .cu-list>.cu-item .goods { display: flex; justify-content: space-between; align-items: center; }
	.wanlpage-classify .cu-list>.cu-item .goods>image { height: 130rpx; background-color: #f9f9f9;}
	.wanlpage-classify .cu-list>.cu-item .goods>image + image { margin-left: 25rpx; }
	
	.hot-image{
		width: 702rpx;
		height: 525rpx;
		margin: 0rpx 24rpx;
	}
	
	.hot-title-main{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		padding: 37rpx 0rpx 31rpx 29rpx;
	}
	
	.hot-box{
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.hot-content-box{
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		margin: 0rpx 24rpx;
	}
	
	.hot-shop-image{
		width: 139rpx;
		height: 171rpx;
		margin-top: 22rpx;
	}
	
	.hot-title{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 41rpx;
	}
	
	.hot-price{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F53938;
		margin-top: 13rpx;
		padding-bottom: 20rpx;
	}
	
	.hot-item{
		width: 214rpx;
		height: 311rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
	
	.hot-body{
		padding-left: 12rpx;
		width: 100%;
		display: flex;
		overflow-x: scroll;
		width: 702rpx;
	}
	
	.hot-more-product{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-right: 6rpx;
	}
	
	.right-iamge{
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
	}
	
	.hot-btn{
		width: 224rpx;
		height: 52rpx;
		border: 2px solid #FFFFFF;
		border-radius: 26rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
	
	.hot-btn-boxs{
		position: absolute;
		bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.ad-image{
		width: 702rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0rpx 24rpx 20rpx 24rpx;
	}
	
	.colorwhite{
		color:white;
		font-size: 22rpx;
	}
	
	.ad-box{
		position: absolute;
		top: 41rpx;
		left:82rpx;
		display: flex;
		flex-direction: column;
	}
	
	.yimei-box{
		position: relative;
	}
	
	.ad-title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #D236DF;
	}
	
	.ad-btn{
		display: flex;
		margin-top: 15rpx;
		width: 136rpx;
		height: 38rpx;
		background: #FD76CF;
		border-radius: 17rpx;
		align-items: center;
		justify-content: center;
	}
	
	.ad-btn-title{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F7F7F7;
	}
</style>
